'use client';

import React, { useState } from 'react';
import { Card, Typography, Space, Tag, Divider, message } from 'antd';
import { TagsToggle } from '@/components';

const { Title, Text, Paragraph } = Typography;

export default function TagsToggleTestPage() {
  const [selected, setSelected] = useState<string[]>([]);

  const handleSelect = (en: string) => {
    if (!selected.includes(en)) {
      const next = [...selected, en];
      setSelected(next);
    }
    message.success(`选中英文标签：${en}`);
  };

  return (
    <div style={{ padding: 24 }}>
      <Title level={2}>标签组件测试</Title>
      <Paragraph type="secondary">点击按钮展开/收起，点击标签将返回对应的英文标签 key。</Paragraph>

      <Card title="标签面板">
        <TagsToggle onSelect={handleSelect} buttonText="标签" />
      </Card>

      <Divider />

      <Card title="已选择（英文）">
        <Space wrap>
          {selected.length === 0 ? (
            <Text type="secondary">暂无选择</Text>
          ) : (
            selected.map(tag => (
              <Tag key={tag} color="blue">{tag}</Tag>
            ))
          )}
        </Space>
      </Card>
    </div>
  );
}